// 添加题库
<template>
  <div class="add">
    <el-tabs
      style="height:100%"
      v-model="activeName"
    >
      <el-tab-pane name="first">
        <span slot="label"><i class="el-icon-circle-plus"></i>手动出题</span>
        <section class="append">
          <ul>
            <li>
              <span>题目类型:</span>
              <el-select
                v-model="optionValue"
                placeholder="请选择题型"
                class="w150"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </li>
            <li v-if="optionValue == '选择题'">
              <span>所属章节：</span>
              <el-input
                placeholder="请输入对应章节"
                v-model="postChange.section"
                class="w150"
                clearable
              >
              </el-input>
            </li>
            <li v-if="optionValue == '填空题'">
              <span>所属章节：</span>
              <el-input
                placeholder="请输入对应章节"
                v-model="postFill.section"
                class="w150"
                clearable
              >
              </el-input>
            </li>
            <li v-if="optionValue == '判断题'">
              <span>所属章节：</span>
              <el-input
                placeholder="请输入对应章节"
                v-model="postJudge.section"
                class="w150"
                clearable
              >
              </el-input>
            </li>
            <li v-if="optionValue == '选择题'">
              <span>难度等级:</span>
              <el-select
                v-model="postChange.level"
                placeholder="选择难度等级"
                class="w150"
              >
                <el-option
                  v-for="item in levels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </li>
            <li v-if="optionValue == '填空题'">
              <span>难度等级:</span>
              <el-select
                v-model="postFill.level"
                placeholder="选择难度等级"
                class="w150"
              >
                <el-option
                  v-for="item in levels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </li>
            <li v-if="optionValue == '判断题'">
              <span>难度等级:</span>
              <el-select
                v-model="postJudge.level"
                placeholder="选择难度等级"
                class="w150"
              >
                <el-option
                  v-for="item in levels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </li>
            <li v-if="optionValue == '选择题'">
              <span>正确选项:</span>
              <el-select
                v-model="postChange.rightAnswer"
                placeholder="选择正确答案"
                class="w150"
              >
                <el-option
                  v-for="item in rights"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </li>
          </ul>
          <!-- 选择题部分 -->
          <div
            class="change"
            v-if="optionValue == '选择题'"
          >
            <div class="title">
              <el-tag>题目:</el-tag><span>在下面的输入框中输入题目,形如--DNS 服务器和DHCP服务器的作用是（）</span>
              <el-input
                type="textarea"
                rows="4"
                v-model="postChange.question"
                placeholder="请输入题目内容"
                resize="none"
                class="answer"
              >
              </el-input>
            </div>
            <div class="options">
              <ul>
                <li>
                  <el-tag type="success">A</el-tag>
                  <el-input
                    placeholder="请输入选项A的内容"
                    v-model="postChange.answerA"
                    clearable=""
                  >
                  </el-input>
                </li>
                <li>
                  <el-tag type="success">B</el-tag>
                  <el-input
                    placeholder="请输入选项B的内容"
                    v-model="postChange.answerB"
                    clearable=""
                  >
                  </el-input>
                </li>
                <li>
                  <el-tag type="success">C</el-tag>
                  <el-input
                    placeholder="请输入选项C的内容"
                    v-model="postChange.answerC"
                    clearable=""
                  >
                  </el-input>
                </li>
                <li>
                  <el-tag type="success">D</el-tag>
                  <el-input
                    placeholder="请输入选项D的内容"
                    v-model="postChange.answerD"
                    clearable=""
                  >
                  </el-input>
                </li>
              </ul>
            </div>
            <div class="title">
              <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
              <el-input
                type="textarea"
                rows="4"
                v-model="postChange.analysis"
                placeholder="请输入答案解析"
                resize="none"
                class="answer"
              >
              </el-input>
            </div>
            <div class="submit">
              <el-button
                type="primary"
                @click="changeSubmit()"
              >立即添加</el-button>
            </div>
          </div>
          <!-- 填空题部分 -->
          <div
            class="change fill"
            v-if="optionValue == '填空题'"
          >
            <div class="title">
              <el-tag>题目:</el-tag><span>输入题目,形如--从计算机网络系统组成的角度看，计算机网络可以分为()和()。注意需要考生答题部分一定要用括号（英文半角）括起来。</span>
              <el-input
                type="textarea"
                rows="4"
                v-model="postFill.question"
                placeholder="请输入题目内容"
                resize="none"
                class="answer"
              >
              </el-input>
            </div>
            <div class="fillAnswer">
              <el-tag>正确答案:</el-tag>
              <el-input v-model="postFill.answer"></el-input>
            </div>
            <div class="title analysis">
              <el-tag type="success">解析:</el-tag><span>下方输入框中输入答案解析</span>
              <el-input
                type="textarea"
                rows="4"
                v-model="postFill.analysis"
                placeholder="请输入答案解析"
                resize="none"
                class="answer"
              >
              </el-input>
            </div>
            <div class="submit">
              <el-button
                type="primary"
                @click="fillSubmit()"
              >立即添加</el-button>
            </div>
          </div>
          <!-- 判断题 -->
          <div
            class="change judge"
            v-if="optionValue == '判断题'"
          >
            <div class="title">
              <el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span>
              <el-input
                type="textarea"
                rows="4"
                v-model="postJudge.question"
                placeholder="请输入题目内容"
                resize="none"
                class="answer"
              >
              </el-input>
            </div>
            <div class="judgeAnswer">
              <el-radio
                v-model="postJudge.answer"
                label="T"
              >正确</el-radio>
              <el-radio
                v-model="postJudge.answer"
                label="F"
              >错误</el-radio>
            </div>
            <div class="title">
              <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
              <el-input
                type="textarea"
                rows="4"
                v-model="postJudge.analysis"
                placeholder="请输入答案解析"
                resize="none"
                class="answer"
              >
              </el-input>
            </div>
            <div class="submit">
              <el-button
                type="primary"
                @click="judgeSubmit()"
              >立即添加</el-button>
            </div>
          </div>
        </section>
      </el-tab-pane>
      <el-tab-pane
        style="height:100%"
        name="three"
      >
        <span slot="label"><i class="iconfont el-icon-s-promotion"></i>AI出题</span>
        <div class="ai">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
          >

            <el-form-item label="科目">
              <el-select
                v-model="form.subject"
                placeholder="请选择科目"
              >
                <el-option
                  :label="form.subject"
                  :value="form.subject"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题型">
              <el-select
                v-model="form.type"
                placeholder="请选择题型"
              >
                <el-option
                  label="编程题"
                  value="programming"
                />
                <el-option
                  label="单选题"
                  value="single_choice"
                />
                <el-option
                  label="多选题"
                  value="multiple_choice"
                />
                <el-option
                  label="判断题"
                  value="true_false"
                />
                <el-option
                  label="简答题"
                  value="essay"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="题目数量">
              <el-input
                style="width:217px"
                v-model="form.question_count"
                placeholder="请输入出题数量"
              ></el-input>
            </el-form-item>
            <el-form-item label="分数/每题">
              <el-input
                style="width:217px"
                v-model="form.score"
                placeholder="请输入每道题的分数"
              ></el-input>
            </el-form-item>
            <el-form-item label="特定要求">
              <el-input
                style="width:217px"
                v-model="form.extra"
                placeholder="请输入额外特定要求"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit"
              >立即出题</el-button>
            </el-form-item>
          </el-form>
          <!-- 题 -->
          <el-card
            v-show="Paper"
            class="box-card"
          >
            <div>
              {{Paper }}
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label"><i class="iconfont icon-daoru-tianchong"></i>在线组卷</span>
        <div class="box">
          <ul>
            <li>
              <span>试题难度:</span>
              <el-select
                v-model="difficultyValue"
                placeholder="试题难度"
                class="w150"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </li>
            <li>
              <span>选择题数量：</span> <el-input
                type="text"
                v-model="changeNumber"
              ></el-input>
              <span style="marginLeft:55px">选择题分数/每道：</span> <el-input
                type="text"
                v-model="changeScore"
              ></el-input>
            </li>
            <li>
              <span>填空题数量：</span> <el-input
                type="text"
                v-model="fillNumber"
              ></el-input>
              <span style="marginLeft:55px">填空题分数/每道：</span> <el-input
                type="text"
                v-model="fillScore"
              ></el-input>
            </li>
            <li>
              <span>判断题数量：</span> <el-input
                type="text"
                v-model="judgeNumber"
              ></el-input>
              <span style="marginLeft:55px">判断题分数/每道：</span> <el-input
                type="text"
                v-model="judgeScore"
              ></el-input>
            </li>
            <li>
              <el-button
                type="primary"
                @click="create()"
              >立即组卷</el-button>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      changeNumber: null, //选择题出题数量
      fillNumber: null, //填空题出题数量
      judgeNumber: null, //判断题出题数量
      activeName: "first", //活动选项卡
      options: [
        //题库类型
        {
          value: "选择题",
          label: "选择题",
        },
        {
          value: "填空题",
          label: "填空题",
        },
        {
          value: "判断题",
          label: "判断题",
        },
      ],
      difficulty: [
        //试题难度
        {
          value: "简单",
          label: "简单",
        },
        {
          value: "一般",
          label: "一般",
        },
        {
          value: "困难",
          label: "困难",
        },
      ],
      difficultyValue: "简单",
      levels: [
        //难度等级
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
      ],
      rights: [
        //正确答案
        {
          value: "A",
          label: "A",
        },
        {
          value: "B",
          label: "B",
        },
        {
          value: "C",
          label: "C",
        },
        {
          value: "D",
          label: "D",
        },
      ],
      paperId: null,
      optionValue: "选择题", //题型选中值
      subject: "", //试卷名称用来接收路由参数
      postChange: {
        //选择题提交内容
        subject: "", //试卷名称
        level: "", //难度等级选中值
        rightAnswer: "", //正确答案选中值
        section: "", //对应章节
        question: "", //题目
        analysis: "", //解析
        answerA: "",
        answerB: "",
        answerC: "",
        answerD: "",
      },
      postFill: {
        //填空题提交内容
        subject: "", //试卷名称
        level: "", //难度等级选中值
        answer: "", //正确答案
        section: "", //对应章节
        question: "", //题目
        analysis: "", //解析
      },
      postJudge: {
        //判断题提交内容
        subject: "", //试卷名称
        level: "", //难度等级选中值
        answer: "", //正确答案
        section: "", //对应章节
        question: "", //题目
        analysis: "", //解析
      },
      postPaper: {
        //考试管理表对应字段
        paperId: null,
        questionType: null, // 试卷类型 1--选择题  2--填空题   3--判断题
        questionId: null,
      },
      loading: false,
      Paper: "",
      form: {
        id: 1,
        subject: "",
        type: "",
        question_count: "",
        score: "",
        extra: "",
      },
      examName: {
        //表单数据初始化
        source: "大数据技术", //考试名称
        description: null, //介绍
        institute: null, //学院
        major: null, //专业
        grade: null, //年级
        examDate: null, //考试日期
        totalTime: null, //持续时间
        totalScore: 100, //总分
        type: null, //考试类型
        tips: null, //考生提示
        paperId: null,
      },
      changeScore: "",
      fillScore: "",
      judgeScore: "",
    };
  },
  created() {
    this.getParams();
    this.form.subject = this.$route.query.subject;
  },
  methods: {
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    create() {
      this.$axios({
        url: "/api/item",
        method: "post",
        data: {
          changeNumber: this.changeNumber, //试卷难度
          fillNumber: this.fillNumber, //选择题数量
          judgeNumber: this.judgeNumber, //填空题数量
          paperId: this.paperId, //
          subject: this.form.subject, //题目数量太少，指定为计算机网络出题
          changeScore:this.changeScore,
          fillScore:this.fillScore,
          judgeScore:this.judgeScore
        },
      }).then((res) => {
        console.log(res);
        let data = res.data;
        if (data.code == 200) {
          setTimeout(() => {
            this.$router.push({ path: "/selectAnswer" });
          }, 1000);
          this.$message({
            message: data.message,
            type: "success",
          });
        } else if (data.code == 400) {
          this.$message({
            message: data.message,
            type: "error",
          });
        }
      });
    },
    getParams() {
      let subject = this.$route.query.subject; //获取试卷名称
      let paperId = this.$route.query.paperId; //获取paperId
      this.paperId = paperId;
      this.subject = subject;
      this.postPaper.paperId = paperId;
    },
    changeSubmit() {
      //选择题题库提交
      this.postChange.subject = this.subject;
      this.$axios({
        //提交数据到选择题题库表
        url: "/api/MultiQuestion",
        method: "post",
        data: {
          ...this.postChange,
        },
      })
        .then((res) => {
          //添加成功显示提示
          let status = res.data.code;
          if (status == 200) {
            this.$message({
              message: "已添加到题库",
              type: "success",
            });
            this.postChange = {};
          }
        })
        .then(() => {
          this.$axios(`/api/multiQuestionId`).then((res) => {
            //获取当前题目的questionId
            let questionId = res.data.data.questionId;
            this.postPaper.questionId = questionId;
            this.postPaper.questionType = 1;
            this.$axios({
              url: "/api/paperManage",
              method: "Post",
              data: {
                ...this.postPaper,
              },
            });
          });
        });
    },
    fillSubmit() {
      //填空题提交
      this.postFill.subject = this.subject;
      this.$axios({
        url: "/api/fillQuestion",
        method: "post",
        data: {
          ...this.postFill,
        },
      })
        .then((res) => {
          let status = res.data.code;
          if (status == 200) {
            this.$message({
              message: "已添加到题库",
              type: "success",
            });
            this.postFill = {};
          }
        })
        .then(() => {
          this.$axios(`/api/fillQuestionId`).then((res) => {
            //获取当前题目的questionId
            let questionId = res.data.data.questionId;
            this.postPaper.questionId = questionId;
            this.postPaper.questionType = 2;
            this.$axios({
              url: "/api/paperManage",
              method: "Post",
              data: {
                ...this.postPaper,
              },
            });
          });
        });
    },
    judgeSubmit() {
      //判断题提交
      this.postJudge.subject = this.subject;
      this.$axios({
        url: "/api/judgeQuestion",
        method: "post",
        data: {
          ...this.postJudge,
        },
      })
        .then((res) => {
          let status = res.data.code;
          if (status == 200) {
            this.$message({
              message: "已添加到题库",
              type: "success",
            });
            this.postJudge = {};
          }
        })
        .then(() => {
          this.$axios(`/api/judgeQuestionId`).then((res) => {
            //获取当前题目的questionId
            let questionId = res.data.data.questionId;
            this.postPaper.questionId = questionId;
            this.postPaper.questionType = 3;
            this.$axios({
              url: "/api/paperManage",
              method: "Post",
              data: {
                ...this.postPaper,
              },
            });
          });
        });
    },

    onSubmit() {
      const loading = this.$loading({
        lock: true,
        text: "正在出题",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      Axios({
        url: "/api/aiProvideQuestion",
        method: "get",
        params: this.form,
      }).then((res) => {
        loading.close();
        this.$message({
          message: "出题成功!",
          type: "success",
        });
        this.Paper = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.add {
  margin: 0px 40px;
  height: 100%;
  .box {
    padding: 0px 20px;
    ul li {
      margin: 10px 0px;
      display: flex;
      align-items: center;
      .el-input {
        width: 6%;
      }
      .w150 {
        margin-left: 20px;
        width: 7%;
      }
    }
  }
  .el-icon-circle-plus {
    margin-right: 10px;
  }
  .icon-daoru-tianchong {
    margin-right: 10px;
  }
  .append {
    margin: 0px 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        margin-right: 20px;
      }
    }
    .change {
      margin-top: 20px;
      padding: 20px 16px;
      background-color: #e7f6f6;
      border-radius: 4px;
      .title {
        padding-left: 6px;
        color: #2f4f4f;
        span:nth-child(1) {
          margin-right: 6px;
        }
        .answer {
          margin: 20px 0px 20px 8px;
        }
        .el-textarea {
          width: 98% !important;
        }
      }
      .options {
        ul {
          display: flex;
          flex-direction: column;
        }
        ul li {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 98%;
          margin: 10px 0px;
          span {
            margin-right: 20px;
          }
        }
      }
      .submit {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .fill {
      .fillAnswer {
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          margin-right: 6px;
        }
        .el-input {
          width: 91% !important;
        }
      }
      .analysis {
        margin-top: 20px;
        margin-left: 5px;
      }
    }
    .judge {
      .judgeAnswer {
        margin-left: 20px;
        margin-bottom: 20px;
      }
    }
    .w150 {
      width: 150px;
    }
    li:nth-child(2) {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .ai {
    display: flex;
    .el-form {
      margin-right: 200px;
    }
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
}
</style>


